
@{
  TableOfContentsElement tocModelRoot = null!;
  var tocModel = Model.GetToc();
  if (!(tocModel is null))
  {
      tocModelRoot = tocModel.Root;
  }
  else
  {
      throw new InvalidOperationException("The Silk.NET website needs a ToC.");
  }

  var navImg = string.Empty;
}

<div class="container-fluid">
  @{var imgClass = "";}
  @if (tocModelRoot.Metadata?.TryGetValue("theme.silk.nav.img.dark", out navImg) ?? false)
  {
      imgClass = "silk-light-only";
      <a class="navbar-brand silk-dark-only" href="@InputUrl(tocModelRoot.Href)">
        <img src="@InputUrl(navImg)">
      </a>
  }
  @if (tocModelRoot.Metadata?.TryGetValue("theme.silk.nav.img", out navImg) ?? false)
  {
      <a class="navbar-brand @imgClass" href="@InputUrl(tocModelRoot.Href)">
        <img src="@InputUrl(navImg)">
      </a>
  }
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="navbar_global">
    <div class="navbar-collapse-header">
      <div class="row">
        <div class="col-6 collapse-brand">
          @if (tocModelRoot.Metadata?.TryGetValue("theme.silk.nav.img", out navImg) ?? false)
          {
              <a href="@InputUrl(tocModelRoot.Href)">
                <img src="@InputUrl(navImg)">
              </a>
          }
        </div>
        <div class="col-6 collapse-close">
          <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
            <span></span>
          </button>
        </div>
      </div>
    </div>
    <ul class="navbar-nav navbar-nav-hover align-items-lg-center">
      @foreach (var tocChild in tocModelRoot.Children ?? Enumerable.Empty<TableOfContentsElement>())
      {
          var bigDropdown = string.Empty;
          if ((tocChild.Metadata?.TryGetValue("theme.silk.nav.big_dropdown", out bigDropdown) ?? false) && bool.Parse(bigDropdown))
          {
              <li class="nav-item dropdown">
                <a href="@InputUrl(tocChild.Href)" class="nav-link" data-toggle="dropdown" href="#" role="button">
                  <i class="ni ni-bold-right d-lg-none"></i>
                  <span class="nav-link-inner--text">@tocChild.Name</span>
                </a>
                <div class="dropdown-menu dropdown-menu-xl">
                  <div class="dropdown-menu-inner">
                    @foreach (var innerChild in tocChild.Children ?? Enumerable.Empty<TableOfContentsElement>())
                    {
                        var innerChildTitleClass = string.Empty;
                        var innerChildTitle = string.Empty;
                        var innerChildIconClass = string.Empty;
                        var innerChildIcon = string.Empty;
                        var innerChildDescription = string.Empty;
                        if ((innerChild.Metadata?.TryGetValue("theme.silk.nav.big_dropdown.title.class", out innerChildTitleClass) ?? false) &&
                            (innerChild.Metadata?.TryGetValue("theme.silk.nav.big_dropdown.title", out innerChildTitle) ?? false) &&
                            (innerChild.Metadata?.TryGetValue("theme.silk.nav.big_dropdown.icon.class", out innerChildIconClass) ?? false) &&
                            (innerChild.Metadata?.TryGetValue("theme.silk.nav.big_dropdown.icon", out innerChildIcon) ?? false) &&
                            (innerChild.Metadata?.TryGetValue("theme.silk.nav.big_dropdown.description", out innerChildDescription) ?? false))
                        { 
                            <a href="@InputUrl(innerChild.Href)" class="media d-flex align-items-center">
                              <div class="@innerChildIconClass">
                                <i class="@innerChildIcon"></i>
                              </div>
                              <div class="media-body ml-3">
                                <h6 class="@innerChildTitleClass">@innerChildTitle</h6>
                                <p class="description d-none d-md-inline-block mb-0">@innerChildDescription</p>
                              </div>
                            </a>
                        }
                    }
                  </div>
                </div>
              </li>
          }
          else
          {
              <li class="nav-item">
                <a href="@InputUrl(tocChild.Href)" class="nav-link">
                  <i class="ni ni-bold-right d-lg-none"></i>
                  <span class="nav-link-inner--text">@tocChild.Name</span>
                </a>
              </li>
          }
      }
    </ul>
    <ul class="navbar-nav align-items-lg-center ml-lg-auto">
      <li class="nav-item">
        <a class="nav-link nav-link-icon silk-dark-only" id="lighton" href="#" data-toggle="tooltip" title="Toggle Light Mode">
          <i class="fa fa-sun"></i>
          <span class="nav-link-inner--text d-lg-none">Toggle Light Mode</span>
        </a>
        <a class="nav-link nav-link-icon silk-light-only" id="lightoff" href="#" data-toggle="tooltip" title="Toggle Dark Mode">
          <i class="fa fa-moon"></i>
          <span class="nav-link-inner--text d-lg-none">Toggle Dark Mode</span>
        </a>
      </li>
      @{
          var discordLink = string.Empty;
          var githubLink = string.Empty;
      }
      @if (tocModelRoot.Metadata?.TryGetValue("theme.silk.nav.discord", out discordLink) ?? false)
      {
          <li class="nav-item">
            <a class="nav-link nav-link-icon" href="@discordLink" target="_blank" data-toggle="tooltip" title="Chat to us on Discord">
              <i class="fab fa-discord"></i>
              <span class="nav-link-inner--text d-lg-none">Discord</span>
            </a>
          </li>
      }
      @if (tocModelRoot.Metadata?.TryGetValue("theme.silk.nav.github", out discordLink) ?? false)
      {
          <li class="nav-item">
            <a class="nav-link nav-link-icon" href="@githubLink" target="_blank" data-toggle="tooltip" title="Star us on Github">
              <i class="fab fa-github"></i>
              <span class="nav-link-inner--text d-lg-none">GitHub</span>
            </a>
          </li>
      }
      @{
          var navBtnClass = string.Empty;
          var navBtnTxt = string.Empty;
          var navBtnHref = string.Empty;
      }
      @if ((tocModelRoot.Metadata?.TryGetValue("theme.silk.nav.btn", out navBtnClass) ?? false) &&
           (tocModelRoot.Metadata?.TryGetValue("theme.silk.nav.btn.txt", out navBtnTxt) ?? false) &&
           (tocModelRoot.Metadata?.TryGetValue("theme.silk.nav.btn.href", out navBtnHref) ?? false))
      {
          <li class="nav-item d-none d-lg-block ml-lg-4 silk-nav-btn">
            @{
                var navBtnHrefAbs = "false";
                var hrefToUse = (tocModelRoot.Metadata?.TryGetValue("theme.silk.nav.btn.href.abs", out navBtnHrefAbs) ?? false) && bool.Parse(navBtnHrefAbs)
                    ? navBtnHref
                    : InputUrl(navBtnHref);
            }

            <a href="@hrefToUse" target="_blank" class="btn btn-outline-primary">
              <span class="nav-link-inner--text">Getting Started</span>
            </a>
          </li>
      }
    </ul>
  </div>
</div>